<template>
  <main id="app">
    <a-spin tip="加载中..." :spinning="$store.state.app.loading" v-if="authPage">
      <a-config-provider :locale="locale">
        <router-view v-if="isAllPage"/>
        <div id="app-layout" v-else>
          <div id="header">
            <app-header/>
          </div>
          <div id="wrapper">
            <div id="menu">
              <app-menu/>
            </div>
            <div id="content">
              <router-view/>
            </div>
          </div>
        </div>
      </a-config-provider>
    </a-spin>
    <a-result status="403" title="403" sub-title="当前用户角色无权限访问此页面" v-else>
      <template #extra>
        <a-button type="primary">
          返回首页
        </a-button>
      </template>
    </a-result>
  </main>
</template>
<script>
import appHeader from "./components/appHeader";
import appMenu from "./components/appMenu"
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';

export default {
  components: {
    appHeader, appMenu
  },
  data() {
    return {
      locale: zhCN,
      authTitle:{
        '403':"当前用户角色无权限访问此页面",
        '404':"当前访问的页面不存在",
      }
    }
  },
  computed: {
    isAllPage() {
      return ['/login'].includes(this.$route.path)
    },
    authPage(){
      return this.$store.state.app.authPage
    }
  }
}
</script>
<style lang="stylus">
@import "../node_modules/ant-design-vue/dist/antd.min.css"
@import "/assets/style/reset.styl"
@import "/assets/style/common.styl"
#app-layout {
  width 100vw
  height 100vh
  display flex
  flex-direction column

  #header {
    height 80px
    flex-shrink 0
  }

  #wrapper {
    display flex
    flex-grow 1

    #menu, #content {
      height 100%
    }

    #menu {
      width 200px
      flex-shrink 0
    }

    #content {
      max-height calc(100vh - 80px)
      overflow auto
      flex-grow 1
      padding 20px
    }

    .ant-select-selection {
      border: 1px solid #D8DCF7;
      border-radius: 8px;
    }

    .ant-tabs-bar {
      border-bottom: none;
    }
  }
}
</style>
